<template>
  <div class="set">
    <set-header></set-header>
    <div class="set-main-first">
      <van-cell title="账号与安全"  is-link size="large" @click="$router.push('/loginSet')"/>
      <van-cell title="支付设置"  is-link size="large" @click="$router.push('/profile/paymentSet')"/>
    </div>
    <div class="set-main-second">
      <van-cell title="新消息通知" is-link size="large"/>
      <van-cell title="通用"  is-link size="large"/>
    </div>
    <div class="set-main-third">
      <van-cell title="关于"  is-link size="large" value="版本2022.01"/>
    </div>
    <div class="set-main-last">
      <div class="maini-last-login">
        登录其他账号
      </div>
      <div class="maini-last-login" @click="loginOut">
        退出登录
      </div>
      
    </div>
    <van-popup v-model="popupShow" position="bottom" :style="{ height: '18%' }">
      <div class="set_loginBack">
        <div class="set_loginOut" @click="confirmLoginOut">
          退出登录
        </div>
        <div class="set_cancelOut" @click="cancel">
          取消
        </div>
      </div>
      
    </van-popup>
  </div>
</template>

<script>
import setHeader from '@/views/Set/child/setHeader.vue'
export default {
  name:"set",
  data(){
    return {
      popupShow:false
    }
  },
  components: {
    setHeader,
  },
  methods:{
    loginOut(){
      this.popupShow = true
    },
    cancel(){
      this.popupShow = false
    },
    confirmLoginOut(){
      this.$toast.loading("退出登录...");
        setTimeout(() => {
          this.$toast.clear();
          // this.$router.push('/home');
          this.$store.dispatch('getToken','');
          this.$store.dispatch('loginOut','')
          window.sessionStorage.clear();
          this.$router.push('/login')
        },1000);
    }
  }
}
</script>

<style lang="less">
  body {
    background-color: rgb(241, 241, 241);
    
  }
  .van-nav-bar__content {
    background-color: white;
  }
 .set-main-first {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 .set-main-second {
   margin-top: 15px;
 }
 .set-main-third {
   margin-top: 20px;
 }
 .set-main-last {
   margin-top: 50px;
   .maini-last-login {
     display: flex;
     justify-content:center;
     align-items:center;
     width: 100%;
     height: 50px;
     background-color: white;
     margin-bottom: 10px;
   }
 }
 .set_loginBack{
   width: 100%;
   height: 100%;
   background-color: rgb(235, 235, 235);
   .set_loginOut{
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40%;
      font-size: 15px;
      // border: 1px solid rgb(168, 148, 148);
      background-color: rgb(255, 255, 255);
    }
    .set_cancelOut{
      margin: 0 auto;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40%;
      font-size: 15px;
      background-color: rgb(255, 255, 255);

      //  border: 1px solid rgb(231, 231, 231);
    }
 }
 
 
</style>